<template>
  <el-card>
    <el-table
      :data="permissionList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :expand-row-keys="['1']"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" sortable></el-table-column>
      <el-table-column prop="code" label="权限值" sortable></el-table-column>
      <el-table-column prop="toCode" label="跳转权限值"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <!-- 增加 -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            :disabled="row.level === 4"
            @click="addperList(row)"
          />
          <!-- 修改 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            :disabled="row.level === 1"
            @click="updateCell(row)"
          />
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="row.level === 1"
            @click="deletePermission(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item
          label="父级名称"
          label-width="100px"
          v-if="form.level !== 1 && isShow === 1"
        >
          <el-input
            autocomplete="off"
            style="width:90%"
            disabled
            v-model="form.parentName"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" label-width="100px">
          <el-input
            autocomplete="off"
            style="width:90%"
            v-model="form.cellName"
          ></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" label-width="100px">
          <el-input
            autocomplete="off"
            style="width:90%"
            v-model="form.cell"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getPermission,
  perRemove,
  addPermission,
  updatePermission
} from '@/api/acl/permission'

export default {
  name: 'Permission',
  data() {
    return {
      isShow: 1,
      arr: [],
      permissionList: [],
      dialogFormVisible: false,
      form: {
        parentName: '',
        cellName: '',
        cell: '',
        level: 1
      }
    }
  },
  async mounted() {
    this.getPermissList()
  },
  methods: {
    //获取数据
    async getPermissList() {
      let res = await getPermission()
      this.permissionList = res.children
    },

    //删除
    async deletePermission(row) {
      await perRemove(row.id)
      this.$message({
        message: '删除成功了呢!',
        type: 'success'
      })
      this.getPermissList()
    },

    //更新
    addperList(row) {
      console.log(row)
      this.isShow = 1
      this.form.level = row.level
      this.form.parentName = row.name
      this.form.cellName = ''
      this.form.cell = ''
      this.form.id = row.id
      this.dialogFormVisible = true
    },
    //修改
    updateCell(row) {
      console.log(row)
      this.isShow = 2
      this.form.level = row.level
      this.form.cellName = row.name
      this.form.cell = row.code
      this.form.id = row.id
      this.form.pid = row.pid
      this.dialogFormVisible = true
    },
    //确认更新或修改
    async submitForm() {
      const { cellName, cell, level, id, pid } = this.form
      //添加
      if (this.isShow === 1) {
        const obj = {
          code: cell,
          deleted: false,
          level: level + 1,
          name: cellName,
          select: false,
          type: 1,
          pid: id, //这里添加不上三级路由    -------待定
          // toCode: 'string',
          type: 0
        }
        await addPermission(obj)
      } else {
        //修改
        const obj = {
          code: cell,
          deleted: false,
          id,
          level,
          name: cellName,
          pid,
          select: false,
          // toCode: 'string',
          type: 0
        }
        await updatePermission(obj)
      }
      this.$message({
        message: '添加成功了呢!',
        type: 'success'
      })
      this.dialogFormVisible = false
      this.getPermissList()
    }
  }
}
</script>

<style scoped></style>
